<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-25 14:09:23
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-27 09:17:28
 * @FilePath: \antiraed-app\src\components\status-bar\status-bar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
view.merchant-card.flex.py-16(@click="onMerchantDetail")
  image.cover(:src="item.logo_image")
  view.flex1
    view.flex.justify-between.mb-16
      view.flex1.ellipsis-2.f-32-B  {{ item.title }}
      view.type.f-28 {{ item.shop_type_name }}
    view.describe.f-28.ellipsis-2.mb-16 {{ item.descript }}
    view.address-text.flex.justify-between
      view.flex.justify-start
        image.address(:src="Address")
        view.flex1.ellipsis-1.f-28 {{ item.address }}
      view.f-28 {{ item.distance }}
</template>

<script setup>
import Address from "@/static/images/address.png";

const props = defineProps({
  item: {
    type: String,
    default: ""
  }
});

const onMerchantDetail = () => {
  uni.navigateTo({
    // `getDetails?id=${id}&item=${item}`
    url: `/pagesA/merchant/merchant-detail?id=${props.item.id}&lat= ${props.item.lat}&lon=${props.item.lon}`
  });
};
</script>

<style lang="stylus" scoped>
.merchant-card {
  border-bottom: 2rpx solid #E6E6E6;

  .cover {
    margin-right: 20rpx;
    width: 210rpx;
    height: 200rpx;
    border-radius: 12px;
  }
  .type {
    color: rgba(0, 0, 0, 0.38);
  }

  .describe {
    color: rgba(0, 0, 0, 0.6);
  }

  .address {
    width: 40rpx;
    height: 40rpx;
  }

  .address-text {
    color: #306EFF;
  }
}

.merchant-card:last-child {
  border-bottom: 0;
}
</style>
